<template>
	<w-layout showTabbar showNavbar navTitle="任务中心" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<up-tabs
					@change="tabChange"
					:list="tabs.list" 
					:current="tabs.current"
					lineWidth="14"
					lineHeight="14"
					:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
					:activeStyle="{
						color: publicStyles['--color'],
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}"
					:scrollable="true"
					itemStyle="height: 60px;marginRight:40rpx"
					:inactiveStyle="{
						'font-size': '32rpx'
					}"
				>
				</up-tabs>
				<view class="">
					<view class="mt-50" v-for="(item,index) in state.list" :key="index">
						<view class="fr-ac">
							<view class="circle">
								<view class="circle_left ab" :style="renderLeftRate(getNum(item.ywc_count,item.number))"></view>
								<view class="circle_right ab" :style="renderRightRate(getNum(item.ywc_count,item.number))"></view>
								<view class="circle_text fr-ac-jc h-100">
									<view class="fs-24">{{getNum(item.ywc_count,item.number)}}%</view>
								</view>
							</view>
							<view class="ml-15 flex-1">
								<view class="fr-ac">
									<view class="">
										{{item.title}}
									</view>
									<template v-if="item.money_type == 1">
										<image class="ml-30" style="width: 32rpx;height: 32rpx;" src="/src/static/icon/public/yuan-qi.png" mode=""></image>
										<view class="ml-10">
											+{{item.z_number}}
										</view>
									</template>
									<template v-if="item.money_type == 2">
										<image class="ml-30" style="width: 32rpx;height: 32rpx;" src="/src/static/icon/public/yuan-bao.png" mode=""></image>
										<view class="ml-10">
											+{{item.yb_number}}
										</view>
									</template>
									
									<view v-if="item.is_complete == 2" class="ml-auto fr-ac">
										<view class="color op-50 mr-10">
											已完成
										</view>
										<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/success.png" mode=""></image>
									</view>
									<view v-if="item.is_complete == 1" @click="receiveApi(item)" class="ml-auto fr-ac">
										<view class="color">
											领取
										</view>
									</view>
									<view v-if="item.is_complete == 0" @click="$u.route('/pages/index/index')" class="ml-auto fr-ac">
										<view class="color mr-10">
											去完成
										</view>
										<image style="width: 32rpx;height: 32rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
									</view>
									
								</view>
								<view class="op-50 mt-10 fs-24">
									{{item.ywc_count}}/{{item.number}}
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,onShow
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		task_list
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_task_list()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	async function get_task_list(){
		const res = await task_list({
			type: tabs.list[tabs.current].id
		})
		state.list = res.task_list
	}
	function getNum(num1,num2){
		return Math.round(Number(num1) / Number(num2) *100) 
	}
	async function receiveApi(item){
		const res = await ling_task({
			task_list_id: item.id
		})
		uni.$u.toast('领取成功！')
		get_task_list()
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}

	const renderRightRate = (rate) => {
		if (rate < 50) {
			return 'transform: rotate(' + 3.6 * rate + 'deg);';
		} else {
			return 'transform: rotate(0);border-color: var(--color);';
		}
	}

	const renderLeftRate = (rate) => {
		if (rate >= 50) {
			return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
		}
	}
	
	
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:1,
				name:'每日任务',
			},
			{
				id:2,
				name:'每周任务',
			}
		]
	})
	function tabChange(e){
		console.log(tabs.current)
		tabs.current = e.index
		initData()
		get_task_list()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 40rpx;
		
	}
	
	.circle {
	    width: 80rpx;
	    height: 80rpx;
	    position: relative;
	    border-radius: 50%;
	    box-shadow: inset 0 0 0 5rpx var(--color);
	
	    .ab {
	        position: absolute;
	        left: 0;
	        right: 0;
	        top: 0;
	        bottom: 0;
	        margin: auto;
	    }
	
	    &_left {
	        border: 5rpx solid #000;
	        border-radius: 50%;
	        /* 更正！！！
	        之前使用clip是可以正常的，但现在clip被弃用，推荐使用clip-path，但是这个属性和clip-path有些微的不同
	        使用clip-path应该更改为： clip-path: inset(0 40rpx 0 0);
	        */
	        clip: rect(0, 40rpx, 80rpx, 0);
	    }
	
	    &_right {
	        border: 5rpx solid #000;
	        border-radius: 50%;
	        // 使用clip-path应该更改为： clip-path: inset(0 0 0 40rpx);
	        clip: rect(0, 80rpx, 80rpx, 40rpx);
	    }
	}
</style>